import { defineStore } from "pinia";
import { setLocal } from "~/src/utils";
import { initTheme } from "./helpers";
import { useDark, useToggle } from '@vueuse/core';

export const useThemeStore = defineStore('theme', {
  state: (): Theme.ThemeConfig => initTheme(),
  getters:{
    isDark(state){
      const isDark = useDark();
      const toggleDark = useToggle(isDark);
      toggleDark(state.darkMode);
      return state.darkMode;
    }
  },
  actions: {

    /** 设置主题色 */
    setThemeColor(color: string) {
      this.themeColor = color;
      setLocal('__THEME_COLOR__', color);
    },
    /** 缓存主题 */
    cacheThemeSettings() {
      setLocal('__USER_THEME__', this.$state);
    },
    /** 设置布局 */
    setLayoutMode(layout: EnumType.ThemeLayoutMode) {
      this.layout.mode = layout;
    },
    /** 设置tab样式 */
    setTabMode(tabMode: EnumType.ThemeTabMode) {
      this.tab.mode = tabMode;
    },
    /** 设置Page动画样式 */
    setPageMode(pageMode: EnumType.ThemeAnimateMode) {
      this.page.animateMode = pageMode;
    },
    /** 设置侧边栏宽度*/
    setSiderWidth(width: number | undefined) {
      this.sider.width = width;
    },
    /** 设置Page动画样式 */
    setTabHeight(height: number | undefined) {
      this.tab.height = height;
    },
    /** 设置深色模式*/
    setDarkMode(dark: boolean) {
      this.darkMode = dark;
    }
  }
});
